【前言】
本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。
本系列標題一律以【】標示該篇文章主要涉及的內容，例如【JavaScript】、【Vue】等等。
若內容有誤，還麻煩各路大神不吝於點出問題，感激不敬。

為何需要樣板字面值？

以往我們在撰寫JavaScript的時候經常有一個動作叫做「組字串」，相信大家應該不太陌生
為何會稱為「組」呢？
因為通常會看起來像是這樣：

const tofuPudding = "豆花";
const price = 30;
const sentence = "我的" + tofuPudding + "! " + price + "塊!";
console.log(sentence); //我的豆花! 30塊!

一個句子因為有兩個變數的關係，我們要使用4個+來進行字串連接，最後才能得到完整的句子
這種字串處理，就是俗稱的「組字串」

當句子中的變數更多更複雜時，程式碼的可讀性會大幅降低，也容易漏看導致莫名的問題出現
樣板字面值目的是解決傳統字串串接用過多的+號導致的閱讀不易問題

樣板字面值基本範例

樣板字面值基本的語法是使用反引號‵包起字串，要插入變數的時候就使用${}
一樣的案例用樣板字面值來寫就會變成這樣：

const sentence = `我的${tofuPudding} ! ${price}塊!`;

瞬間變得好寫非常多

同時，樣板字面值還可以對應多行文字，過去在沒有樣板字面值時，我們通常會這樣寫：

const list = "<ul>\
    <li>...</li>\
    <li>...</li>\
    <li>...</li>\
</ul>";

為了組出可讀性高的HTML結構，我們不太可能將所有<li>擠在同一行，但"和'都不支援多行文字，因此每一行的結尾都必須加上\（續行符，顧名思義）
不過除了結尾之外每一行都要加上，相當麻煩，有了樣板字面值之後就可以這樣寫：

const list = `<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>`;

直接兩個‵包到底，非常輕鬆

樣板字面值${}傳入的是表達式

在本文的案例中，我們將變數用${}傳入
但其實樣板字面值${}裡面傳入的其實是表達式，因此可以傳入變數以外的內容
例如判斷式：

const sentence = `${1 > 0}`;
console.log(sentence); //true

或三元運算子：

const sentence = `${1 > 0 ? "1大於0" : "1沒有大於0"}`;
console.log(sentence); //1大於0

函式在被呼叫的時候return一個值，也是表達式
因此也可以：

function sum(a,b){
    return a+b
}
const sentence = `${sum(1,2)}`;
console.log(sentence); //3

而樣板字面值本身也是表達式，因此可以在${}裡面使用樣板字面值，形成巢狀結構

const sentence = `${`${price}塊!`}`;
console.log(sentence); //30塊!